<template>
  <div class="container">
    <div class="header edition-heart">
      <div class="left">
        欢迎来到叩丁狼积分商城
      </div>

      <div class="right">
        <ul>
          <li>
            <img
              :src="
                userInfo.userInfo.headImg !== ''
                  ? userInfo.userInfo.headImg
                  : '../../../public/images/userImg.f8bbec5e.png'
              "
              alt=""
            />
            <span>用户名：</span>
            <span>
              {{
                userInfo.userInfo.nickName !== ''
                  ? userInfo.userInfo.nickName
                  : '游客'
              }}
            </span>
          </li>
          <li>
            <span>我的积分：</span>
            <span>
              {{ userInfo.userInfo.coin !== 0 ? userInfo.userInfo.coin : '--' }}
            </span>
          </li>
          <li @click="toast({ str: '功能暂未开通', type: 'warn' })">
            获取积分
          </li>
          <li @click="toWebsite">
            叩丁狼官网
          </li>
          <li
            v-if="loginStatusStore.isLoginStatus"
            @click="router.push('/user/cart')"
          >
            <img src="../../../public/images/cart.png" alt="" />
            <span>购物车</span>
            <span>{{ userInfo.cartTotal }}</span>
          </li>
          <li
            v-if="!loginStatusStore.isLoginStatus"
            @click="loginPageStore.changeShowLoginPage(true)"
          >
            登录
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useLoginStatus } from '@/store/loginStatus'
import { useLoginPage } from '@/store/loginPage'
import { useRouter, useRoute } from 'vue-router'
import { ApiWeChatUsersPCLogin, ApiShopUserProfiles } from './api'
import toast from '../toast/index'
import { inject, reactive, ref } from 'vue'

// 跳转官网
const toWebsite = () => {
  window.open('https://www.wolfcode.cn/')
}

const { loginType, key, userInfos } = inject('data') as {
  loginType: any
  key: any
  userInfos: any
}

const router = useRouter()
const route = useRoute()

// 用户信息
const userInfo = reactive<IData>({
  userInfo: {
    username: '',
    nickName: '',
    phone: '',
    headImg: '',
    lastIp: '',
    lastLogin: '',
    coin: 0,
    staff: 0,
    currentCoinVersion: '',
    addTime: '',
    balance: 0,
    freezeCoin: 0,
  },
  cartTotal: 0,
})
const loginStatusStore = useLoginStatus()
const loginPageStore = useLoginPage()

router
  .isReady()
  .then(() => {
    let code = route.query.code
    // 判断有无扫码成功
    if (code) {
      // 发起请求
      ApiWeChatUsersPCLogin({ code: code as string })
        .then((res) => {
          if (res.code === 0) {
            toast({ str: res.message, type: 'success' })

            localStorage.setItem('x-auth-token', res['x-auth-token'])

            // 关闭登录框
            loginPageStore.changeShowLoginPage(false)
            router.push('/home')
            setTimeout(() => {
              key.value += 1
            }, 100)
          } else if (res.code === 407) {
            toast({ str: '请绑定手机号', type: 'warn' })
            userInfos.uuid = res.uuid
            loginPageStore.changeShowLoginPage(true)
            loginType.value = true
          } else if (res.code === 400) {
            loginPageStore.changeShowLoginPage(true)
            loginType.value = false
            toast({ str: '请重新扫码登录', type: 'warn' })
          }
        })
        .catch((err) => {})
    } else {
    }
  })
  .catch((err) => {})

ApiShopUserProfiles().then((res) => {
  if (res.code === 0) {
    Object.assign(userInfo, res.data)
    userInfos.nickName = userInfo.userInfo.nickName
    userInfos.coin = userInfo.userInfo.coin
    userInfos.headImg = userInfo.userInfo.headImg

    // key.value += 1
    loginStatusStore.changeLoginStatus(true)
  } else {
  }
})
</script>

<style lang="less" scoped>
.container {
  width: 100%;

  background-color: #242b39;
  .header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: center;
    font-size: 14px;

    .right {
      ul {
        display: flex;
        li {
          width: 124px;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 40px;
          cursor: pointer;
          &:first-child {
            img {
              display: inline-block;
              width: 23px;
              height: 23px;
              border-radius: 50%;
              margin-right: 6px;
            }
          }
          &:last-child {
            background-color: #0a328e;
            img {
              display: inline-block;
              margin-right: 8px;
            }
            span {
              &:last-child {
                display: inline-block;
                margin-left: 6px;
                width: 22px;
                height: 22px;
                box-sizing: border-box;
                text-align: center;
                line-height: 22px;
                border-radius: 50%;
                background-color: #fd604d;
              }
            }
          }
        }
      }
    }
  }
}
</style>
